<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>

<pre class="h3">
    table:基础表格
    table-striped:斑马线表格
    table-bordered:带边框的表格
    table-hover:鼠标悬浮停高亮的表格
    table-condensed:紧凑型表格
    table-responsive:响应式表格

    <tr>五种状态的样式类
    active:表示当前活动的信息
    success:表示成功行为
    info:表示普通中立行为
    warning:表示警告行为
    danger:表示危险行为
</pre>

<div class="container">
            <table class="table table-striped table-bordered table-hover">
                    <tr>
                        <th>标题1</th>
                        <th>标题2</th>
                        <th>标题3</th>
                    </tr>

                <tr>
                    <td>内容1</td>
                    <td>内容2</td>
                    <td>内容3</td>
                </tr>
                <tr>
                    <td>内容4</td>
                    <td>内容5</td>
                    <td>内容6</td>
                </tr>


            </table>
    <h3>紧凑型表格</h3>
    <table class="table table-condensed table-hover table-bordered">
        <tr>
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>

        <tr>
            <td>内容1</td>
            <td>内容2</td>
            <td>内容3</td>
        </tr>
        <tr>
            <td>内容4</td>
            <td>内容5</td>
            <td>内容6</td>
        </tr>


    </table>
    <h3>响应式表格（单独放在div容器中）</h3>
    <div class="table-responsive">
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th>标题1</th>
                <th>标题2</th>
                <th>标题3</th>
            </tr>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
                <td>内容3</td>
            </tr>
            <tr>
                <td>内容4</td>
                <td>内容5</td>
                <td>内容6</td>
            </tr>
            </thead>
        </table>
    </div>

</div>

</body>
</html>